<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高级翻译与变量名生成工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --accent-color: #f72585;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --success-color: #4cc9f0;
            --card-bg: rgba(255, 255, 255, 0.94);
            --transition: all 0.3s ease;
            --border-radius: 16px;
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            background: linear-gradient(135deg, #4361ee, #3a0ca3, #7209b7);
            color: var(--dark-color);
            min-height: 100vh;
            padding: 30px 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            color: white;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        header h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            font-weight: 800;
        }
        
        header p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
            opacity: 0.9;
        }
        
        .tool-container {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: 30px;
            margin-bottom: 30px;
        }
        
        @media (max-width: 900px) {
            .tool-container {
                grid-template-columns: 1fr;
            }
        }
        
        .card {
            background: var(--card-bg);
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: var(--transition);
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }
        
        .card-header {
            background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 20px 30px;
            font-size: 1.5rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .card-body {
            padding: 30px;
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        label {
            display: block;
            margin-bottom: 12px;
            font-weight: 600;
            color: var(--secondary-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        label i {
            width: 24px;
            text-align: center;
        }
        
        textarea, select, input {
            width: 100%;
            padding: 15px;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            font-size: 1.05rem;
            transition: var(--transition);
            background: white;
        }
        
        textarea {
            min-height: 180px;
            resize: vertical;
            line-height: 1.7;
        }
        
        textarea:focus, select:focus, input:focus {
            border-color: var(--primary-color);
            outline: none;
            box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.15);
        }
        
        .language-selector {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
        
        .api-selector {
            background: #f0f7ff;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .api-selector label {
            margin-bottom: 10px;
            color: var(--primary-color);
            font-size: 1.1rem;
        }
        
        .btn {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            color: white;
            border: none;
            padding: 15px 25px;
            border-radius: 12px;
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: 600;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            letter-spacing: 0.5px;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .result-container {
            margin-top: 25px;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid #e2e8f0;
        }
        
        .result-title {
            background: #f0f7ff;
            padding: 15px 20px;
            font-weight: 600;
            color: var(--secondary-color);
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .result-content {
            padding: 20px;
            background: white;
            font-size: 1.1rem;
            line-height: 1.7;
            min-height: 150px;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .result-item {
            padding: 15px 0;
            border-bottom: 1px dashed #eee;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        
        .result-item:last-child {
            border-bottom: none;
        }
        
        .translate-text {
            flex: 1;
            padding-right: 20px;
            word-break: break-word;
        }
        
        .translate-result {
            flex: 1;
            font-weight: 500;
            color: var(--primary-color);
            padding-right: 20px;
        }
        
        .btn-copy {
            background: #eef2ff;
            color: var(--primary-color);
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .btn-copy:hover {
            background: var(--primary-color);
            color: white;
            transform: scale(1.1);
        }
        
        .format-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
        
        .format-option {
            border: 2px solid #e0e0e0;
            padding: 15px 10px;
            border-radius: 12px;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
            font-size: 0.95rem;
            font-weight: 500;
        }
        
        .format-option:hover {
            border-color: var(--primary-color);
            background-color: rgba(67, 97, 238, 0.05);
        }
        
        .format-option.active {
            border-color: var(--primary-color);
            background: linear-gradient(to bottom right, rgba(67, 97, 238, 0.1), rgba(63, 55, 201, 0.08));
            color: var(--secondary-color);
            font-weight: 600;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
        }
        
        .history-container {
            margin-top: 30px;
        }
        
        .history-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .history-content {
            max-height: 300px;
            overflow-y: auto;
            background: white;
            border-radius: 12px;
            padding: 20px;
            border: 1px solid #e2e8f0;
        }
        
        .history-item {
            padding: 15px;
            margin-bottom: 15px;
            background: #f9fafb;
            border-radius: 10px;
            border-left: 4px solid var(--primary-color);
            transition: var(--transition);
        }
        
        .history-item:hover {
            background: #f0f7ff;
            transform: translateX(5px);
        }
        
        .history-text {
            font-weight: 500;
            margin-bottom: 8px;
            color: var(--dark-color);
        }
        
        .history-result {
            color: var(--primary-color);
            font-weight: 500;
            margin-bottom: 10px;
        }
        
        .history-meta {
            display: flex;
            justify-content: space-between;
            color: #718096;
            font-size: 0.85rem;
        }
        
        .loader {
            display: none;
            text-align: center;
            padding: 20px;
            color: var(--secondary-color);
            font-weight: 500;
        }
        
        .loader i {
            animation: spin 1s linear infinite;
            margin-right: 10px;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background: var(--success-color);
            color: white;
            padding: 15px 25px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.15);
            transform: translateX(150%);
            transition: transform 0.3s ease;
            z-index: 1000;
        }
        
        .notification.show {
            transform: translateX(0);
        }
        
        .api-status {
            font-size: 0.9rem;
            margin-top: 5px;
            font-weight: normal;
            color: #718096;
        }
        
        @keyframes spin {
            100% { transform: rotate(360deg); }
        }
        
        @media (max-width: 768px) {
            .language-selector {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            header h1 {
                font-size: 2.2rem;
            }
            
            .card-header {
                font-size: 1.3rem;
                padding: 15px 20px;
            }
            
            .card-body {
                padding: 20px;
            }
        }
        
        footer {
            text-align: center;
            margin-top: 40px;
            color: rgba(255, 255, 255, 0.85);
            font-size: 0.95rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-globe-americas"></i> 高级翻译与变量名生成工具</h1>
            <p>支持多文本翻译、变量名生成、历史记录和API切换 - 使用真实API，完全可用</p>
        </header>
        <input type="file" id="file-input">
        <button onclick="createFile()">文件创建</button>
        <button onclick="writeFile()">文件写入</button>
        <div class="tool-container">
            <!-- 左侧翻译区域 -->
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-exchange-alt"></i> 多文本翻译模块
                </div>
                <div class="card-body">
                    <div class="api-selector">
                        <label for="api-selector"><i class="fas fa-plug"></i> 选择翻译API</label>
                        <select id="api-selector">
                            <option value="libre">LibreTranslate (推荐)</option>
                            <option value="google">Google翻译模拟</option>
                        </select>
                        <div class="api-status">当前API状态: <span id="api-status">正常</span></div>
                    </div>
                    
                    <div class="form-group">
                        <label for="source-text"><i class="fas fa-font"></i> 输入要翻译的文本 (每行一个条目)</label>
                        <textarea id="source-text" placeholder="请输入要翻译的文本，每行一个条目&#10;例如:&#10;你好，世界&#10;这是一个翻译工具&#10;欢迎使用本服务">用户信息
订单总价
产品列表
创建时间</textarea>
                    </div>
                    
                    <div class="language-selector">
                        <div class="form-group">
                            <label for="source-lang"><i class="fas fa-arrow-right"></i> 源语言</label>
                            <select id="source-lang">
                                <option value="auto">自动检测</option>
                                <option value="zh" selected>中文</option>
                                <option value="en">英语</option>
                                <option value="ja">日语</option>
                                <option value="ko">韩语</option>
                                <option value="fr">法语</option>
                                <option value="es">西班牙语</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="target-lang"><i class="fas fa-arrow-left"></i> 目标语言</label>
                            <select id="target-lang">
                                <option value="en" selected>英语</option>
                                <option value="zh">中文</option>
                                <option value="ja">日语</option>
                                <option value="ko">韩语</option>
                                <option value="fr">法语</option>
                                <option value="es">西班牙语</option>
                            </select>
                        </div>
                    </div>
                    
                    <button class="btn" id="translate-btn">
                        <i class="fas fa-paper-plane"></i> 翻译文本
                    </button>
                    
                    <div class="loader" id="translation-loader">
                        <i class="fas fa-spinner"></i> 正在翻译中，请稍候...
                    </div>
                    
                    <div class="result-container">
                        <div class="result-title">
                            <i class="fas fa-check-circle"></i> 翻译结果
                        </div>
                        <div class="result-content" id="translation-result">
                            <!-- 结果将动态生成 -->
                            <div class="result-item">
                                <div class="translate-text">用户信息</div>
                                <div class="translate-result">User information</div>
                                <button class="btn-copy" title="复制结果"><i class="fas fa-copy"></i></button>
                            </div>
                            <div class="result-item">
                                <div class="translate-text">订单总价</div>
                                <div class="translate-result">Order total price</div>
                                <button class="btn-copy" title="复制结果"><i class="fas fa-copy"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧变量名生成区域 -->
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-code"></i> 变量名生成器
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label for="variable-source"><i class="fas fa-keyboard"></i> 输入要转换的文本</label>
                        <textarea id="variable-source" placeholder="输入描述性文本（如：用户姓名、订单总价）...">用户信息</textarea>
                    </div>
                    
                    <div class="form-group">
                        <label><i class="fas fa-cogs"></i> 选择变量名格式</label>
                        <div class="format-options">
                            <div class="format-option active" data-format="camelCase">小驼峰 (userName)</div>
                            <div class="format-option" data-format="PascalCase">大驼峰 (UserName)</div>
                            <div class="format-option" data-format="snake_case">下划线 (user_name)</div>
                        </div>
                        <div class="format-options">
                            <div class="format-option" data-format="kebab-case">横线分隔 (user-name)</div>
                            <div class="format-option" data-format="UPPER_CASE">大写常量 (USER_NAME)</div>
                        </div>
                    </div>
                    
                    <button class="btn" id="generate-btn">
                        <i class="fas fa-bolt"></i> 生成变量名
                    </button>
                    
                    <div class="loader" id="variable-loader">
                        <i class="fas fa-spinner"></i> 正在生成变量名...
                    </div>
                    
                    <div class="result-container">
                        <div class="result-title">
                            <i class="fas fa-check-circle"></i> 生成的变量名
                        </div>
                        <div class="result-content" id="variable-result">
                            <!-- 结果将动态生成 -->
                        </div>
                    </div>
                    
                    <div class="history-container">
                        <div class="history-header">
                            <h3><i class="fas fa-history"></i> 历史记录</h3>
                            <button id="clear-history" class="btn-copy" title="清除历史"><i class="fas fa-trash-alt"></i></button>
                        </div>
                        <div class="history-content" id="history-content">
                            <!-- 历史记录将动态生成 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <footer>
            <p>© 2023 高级翻译与变量名生成工具 | 使用真实翻译API | 简洁高效，助力开发</p>
        </footer>
    </div>
    
    <div class="notification" id="notification">结果已复制到剪贴板！</div>
    
    <script>
        (function(){
            let File = document.getElementById("file-input");
            File.addEventListener('change', function(e) { 
                let file = e.target.files[0];
                let formData = new FormData();
                formData.append('file',file)
                console.log('formData',formData)
                uploadFile(formData);
            });
            // console.log('File',File)
            login()
        }())
        var token = ''
        function login(){
            fetch('http://localhost:3300/api/login',{
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    username: 'admin',
                    password: '123456'
                })
            }).then(res=>res.json()).then(res=>{
                console.log('登录成功，token：', res.data.token);
                if(res.code === 200 && res.data.token){
                    token = res.data.token
                    getCheck(res.data.token)
                }
            })
        }
        function getCheck(token){ 
            fetch('http://localhost:3300/api/auth/check',{
                method: 'POST',
                headers: {
                    'Authorization': token
                }
            })
        }
        // 文件创建
        function createFile(){
            fetch('http://localhost:3300/api/createFile', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': token
                    },
                body: JSON.stringify({
                    fileType: 'contract', // 文件类型目录
                    content: '甲方：XXX\n乙方：YYY\n签约日期：2024-01-01'
                })
            })
        }
        // 文件写入
        function writeFile(){
            fetch('http://localhost:3300/api/writeFile', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': token
                },
                body: JSON.stringify({
                    filename: '测试文件写入.txt',
                    content: '2024-01-01 09:00:00 [INFO] 系统启动成功'
                })
            })
        }
        // 文件上传
        function uploadFile(formData){
            fetch('http://localhost:3300/api/upload',{
                method:'POST',
                body:formData
            }).then(res=>res.json()).then(res=>{
                console.log('res',res)
            })
        }
        // 全局变量
        let translationHistory = [];
        const MAX_HISTORY = 10;
        
        // DOM 加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 加载历史记录
            loadHistory();
            
            // 切换变量名格式
            document.querySelectorAll('.format-option').forEach(option => {
                option.addEventListener('click', function() {
                    document.querySelectorAll('.format-option').forEach(opt => opt.classList.remove('active'));
                    this.classList.add('active');
                });
            });
            
            // 翻译功能
            document.getElementById('translate-btn').addEventListener('click', translateText);
            
            // 变量名生成功能
            document.getElementById('generate-btn').addEventListener('click', generateVariableName);
            
            // 清除历史记录
            document.getElementById('clear-history').addEventListener('click', clearHistory);
            
            // 初始加载时自动生成示例
            setTimeout(() => {
                generateVariableName();
            }, 500);
        });
        
        // 翻译文本函数
        async function translateText() {
            const sourceText = document.getElementById('source-text').value;
            const sourceLang = document.getElementById('source-lang').value;
            const targetLang = document.getElementById('target-lang').value;
            const apiType = document.getElementById('api-selector').value;
            
            if (!sourceText.trim()) {
                showNotification('请输入要翻译的文本');
                return;
            }
            
            // 分割多行文本
            const textLines = sourceText.split('\n').filter(line => line.trim() !== '');
            if (textLines.length === 0) {
                showNotification('请输入有效的文本');
                return;
            }
            
            // 显示加载状态
            const loader = document.getElementById('translation-loader');
            const resultContainer = document.getElementById('translation-result');
            loader.style.display = 'block';
            resultContainer.innerHTML = '';
            
            try {
                // 逐行翻译
                for (let i = 0; i < textLines.length; i++) {
                    const text = textLines[i].trim();
                    if (!text) continue;
                    
                    // 使用选定的API翻译
                    const translatedText = await translateWithAPI(text, sourceLang, targetLang, apiType);
                    
                    // 创建结果条目
                    const resultItem = document.createElement('div');
                    resultItem.className = 'result-item';
                    resultItem.innerHTML = `
                        <div class="translate-text">${escapeHtml(text)}</div>
                        <div class="translate-result">${escapeHtml(translatedText)}</div>
                        <button class="btn-copy" title="复制结果"><i class="fas fa-copy"></i></button>
                    `;
                    resultContainer.appendChild(resultItem);
                    
                    // 添加复制事件
                    resultItem.querySelector('.btn-copy').addEventListener('click', function() {
                        copyToClipboard(translatedText);
                    });
                    
                    // 添加一点延迟避免API限速
                    await new Promise(resolve => setTimeout(resolve, 200));
                }
            } catch (error) {
                console.error('翻译错误:', error);
                resultContainer.innerHTML = `<div class="result-item"><div>翻译服务暂时不可用，请稍后再试 (${error.message})</div></div>`;
                document.getElementById('api-status').textContent = '服务异常';
                document.getElementById('api-status').style.color = '#e74c3c';
            } finally {
                loader.style.display = 'none';
            }
        }
        
        // 使用真实API翻译
        async function translateWithAPI(text, sourceLang, targetLang, apiType) {
            // 自动检测语言时使用空字符串
            const sl = sourceLang === 'auto' ? '' : sourceLang;
            
            if (apiType === 'libre') {
                // 使用LibreTranslate API
                const response = await fetch('https://libretranslate.com/translate', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        q: text,
                        source: sl,
                        target: targetLang,
                        format: 'text'
                    })
                });
                
                if (!response.ok) {
                    throw new Error(`API错误: ${response.status}`);
                }
                
                const data = await response.json();
                return data.translatedText;
            } else {
                // 模拟Google翻译API
                // 实际开发中应替换为真实API调用
                const translations = {
                    '用户信息': 'User Information',
                    '订单总价': 'Order Total Price',
                    '产品列表': 'Product List',
                    '创建时间': 'Creation Time',
                    '你好，世界': 'Hello World',
                    '这是一个翻译工具': 'This is a translation tool',
                    '欢迎使用本服务': 'Welcome to use this service'
                };
                
                // 添加一点延迟模拟网络请求
                await new Promise(resolve => setTimeout(resolve, 300));
                
                return translations[text] || text.split('').reverse().join('') + ' (模拟翻译)';
            }
        }
        
        // 生成变量名
        async function generateVariableName() {
            const sourceText = document.getElementById('variable-source').value.trim();
            const selectedFormat = document.querySelector('.format-option.active').getAttribute('data-format');
            const apiType = document.getElementById('api-selector').value;
            
            if (!sourceText) {
                showNotification('请输入要转换的文本');
                return;
            }
            
            // 显示加载状态
            const loader = document.getElementById('variable-loader');
            const resultContainer = document.getElementById('variable-result');
            loader.style.display = 'block';
            resultContainer.innerHTML = '';
            
            try {
                // 使用API翻译
                const translatedText = await translateWithAPI(sourceText, 'zh', 'en', apiType);
                
                // 格式化变量名
                const variableName = formatVariableName(translatedText, selectedFormat);
                
                // 更新结果
                resultContainer.innerHTML = `
                    <div class="result-item">
                        <div class="translate-text">${escapeHtml(sourceText)}</div>
                        <div class="translate-result">${escapeHtml(variableName)}</div>
                        <button class="btn-copy" title="复制结果"><i class="fas fa-copy"></i></button>
                    </div>
                `;
                
                // 添加复制事件
                resultContainer.querySelector('.btn-copy').addEventListener('click', function() {
                    copyToClipboard(variableName);
                });
                
                // 添加到历史记录
                addToHistory(sourceText, variableName, selectedFormat);
            } catch (error) {
                console.error('变量名生成错误:', error);
                resultContainer.innerHTML = `<div class="result-item"><div>生成失败，请稍后再试 (${error.message})</div></div>`;
            } finally {
                loader.style.display = 'none';
            }
        }
        
        // 格式化变量名
        function formatVariableName(text, format) {
            // 清理文本：移除特殊字符，保留字母、数字和空格
            const cleanedText = text.replace(/[^\w\s]/gi, '')
                                   .replace(/\s+/g, ' ')
                                   .trim()
                                   .toLowerCase();
            
            // 分割成单词
            const words = cleanedText.split(' ');
            
            // 转换为不同格式
            switch(format) {
                case 'camelCase':
                    return words.map((word, index) => 
                        index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1)
                    ).join('');
                    
                case 'PascalCase':
                    return words.map(word => 
                        word.charAt(0).toUpperCase() + word.slice(1)
                    ).join('');
                    
                case 'snake_case':
                    return words.join('_');
                    
                case 'kebab-case':
                    return words.join('-');
                    
                case 'UPPER_CASE':
                    return words.join('_').toUpperCase();
                    
                default:
                    return words.join('_');
            }
        }
        
        // 添加到历史记录
        function addToHistory(source, result, format) {
            const historyItem = {
                source,
                result,
                format,
                timestamp: new Date().toISOString()
            };
            
            // 添加到历史记录顶部
            translationHistory.unshift(historyItem);
            
            // 限制历史记录长度
            if (translationHistory.length > MAX_HISTORY) {
                translationHistory.pop();
            }
            
            // 保存到localStorage
            localStorage.setItem('translationHistory', JSON.stringify(translationHistory));
            
            // 更新UI
            renderHistory();
        }
        
        // 加载历史记录
        function loadHistory() {
            const savedHistory = localStorage.getItem('translationHistory');
            if (savedHistory) {
                translationHistory = JSON.parse(savedHistory);
                renderHistory();
            }
        }
        
        // 渲染历史记录
        function renderHistory() {
            const historyContent = document.getElementById('history-content');
            historyContent.innerHTML = '';
            
            if (translationHistory.length === 0) {
                historyContent.innerHTML = '<div class="history-item"><div>暂无历史记录</div></div>';
                return;
            }
            
            translationHistory.forEach(item => {
                const formattedDate = formatDate(item.timestamp);
                const historyItem = document.createElement('div');
                historyItem.className = 'history-item';
                historyItem.innerHTML = `
                    <div class="history-text">${escapeHtml(item.source)}</div>
                    <div class="history-result">${escapeHtml(item.result)}</div>
                    <div class="history-meta">
                        <span>${item.format}格式</span>
                        <span>${formattedDate}</span>
                    </div>
                `;
                historyContent.appendChild(historyItem);
            });
        }
        
        // 清除历史记录
        function clearHistory() {
            translationHistory = [];
            localStorage.removeItem('translationHistory');
            renderHistory();
            showNotification('历史记录已清除');
        }
        
        // 格式化日期
        function formatDate(isoString) {
            const date = new Date(isoString);
            return `${date.getFullYear()}-${String(date.getMonth()+1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
        }
        
        // 复制到剪贴板
        function copyToClipboard(text) {
            navigator.clipboard.writeText(text).then(() => {
                showNotification('结果已复制到剪贴板！');
            }).catch(err => {
                console.error('复制失败:', err);
            });
        }
        
        // 显示通知
        function showNotification(message) {
            const notification = document.getElementById('notification');
            notification.textContent = message;
            notification.classList.add('show');
            
            setTimeout(() => {
                notification.classList.remove('show');
            }, 2000);
        }
        
        // 转义HTML
        function escapeHtml(unsafe) {
            return unsafe
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }
    </script>
</body>
</html>